import React from "react";
import TextAtom from "../../Atoms/Text.Atom";
import TextAtomEnum from "../../Atoms/Text.Atom/enum";
import SearchModuleMolecule from "../../Molecules/SearchModule.molecule";
import SortSelectMolecule from "../../Molecules/SortSelect.molecule";

interface AdminHeadFiltersProductsProps {
  headFilters?: any;
  items?: any;
  filters?: any;
  applyFilters?: any;
}

const AdminHeadFiltersProducts: React.FC<AdminHeadFiltersProductsProps> = (
  props
) => {
  const { headFilters, items, filters, applyFilters } = props;
  // const { products: allProducts, isLoading } = useProducts();
  // const { uniqueBrands } = useProductData(allProducts);
  // const headFilters = ["All", ...uniqueBrands];

  return (
    <div className="flex gap-[30px]">
      <div className="table-cell align-bottom">
        <div className="table-cell">
          <TextAtom type={TextAtomEnum.enum_h5}>По разделам</TextAtom>
        </div>
        <div className="table-cell">
          {headFilters?.map((e: any, index: number) => (
            <TextAtom
              className="inline-block m-2"
              type={TextAtomEnum.enum_h5}
              key={index}
            >
              {e}
            </TextAtom>
          ))}
        </div>
      </div>
      <SearchModuleMolecule />
      <SortSelectMolecule
        filters={filters}
        applyFilters={applyFilters}
        items={items}
        filterKey="sort"
      />
    </div>
  );
};
export default AdminHeadFiltersProducts;
